<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>list</title>
</head>
<body>

<%--文件上传--%>
<form action="uploadFile" enctype="multipart/form-data" method="post">
    <input type="file" name="file"/>
    <input type="submit"/>
</form>



<form action="/blog/result" method="post">
    I D 查 询
    <input type="text" name="id">
    <input type="submit" value="搜索"><br>


</form>

<form action="/blog/result2" method="post">

    标题查询
    <input type="text" name="title">
    <input type="submit" value="搜索"><br>

</form>


<form  action="/blog/result3" method="post">
内容查询
<input type="text" name="content">
<input type="submit" value="搜索"><br>
</form>


<a href="/blog/form">新增</a>
<table  class="table" >
    <thead>
    <tr>
        <th colspan="5" align="center">用户信息表</th>
    </tr>
    <tr>
        <th>ID</th>
        <th>标题</th>
        <th>内容</th>
        <th>操作</th>
    </tr>
    </thead>

    <table id="ec_table">


    <tbody>

    <c:forEach items="${blogs}" var="blog">
        <tr>

            <td>${blog.id}</td>
            <td>${blog.title}</td>
            <td>${blog.content}</td>

            <td>

                <a href="/blog/edit/${blog.id}">修改</a>  
                <a href="/blog/del/${blog.id}">删除</a>
            </td>
        </tr>
    </c:forEach>

    </tbody>
    </table>
</table>





<span id="spanPre">上一页</span>
<span id="spanNext">下一页</span>
<span id="spanLast">最后一页</span> 第
<span id="spanPageNum"></span>页/共
<span id="spanTotalPage"></span>页

<script>
    var theTable = document.getElementById("ec_table");
    var totalPage = document.getElementById("spanTotalPage");
    var pageNum = document.getElementById("spanPageNum");
    var spanPre = document.getElementById("spanPre");
    var spanNext = document.getElementById("spanNext");
    var spanFirst = document.getElementById("spanFirst");
    var spanLast = document.getElementById("spanLast");
    var numberRowsInTable = theTable.rows.length;
    var pageSize = 5;
    var page = 1;
    //下一页
    function next() {
        hideTable();
        currentRow = pageSize * page;
        maxRow = currentRow + pageSize;
        if (maxRow > numberRowsInTable)
            maxRow = numberRowsInTable;
        for ( var i = currentRow; i < maxRow; i++) {
            theTable.rows[i].style.display = '';//currentRow ~ maxRow 内显示出来
        }
        page++;
        if (maxRow == numberRowsInTable) {
            nextText();
            lastText();
        }
        showPage();
        preLink();
        firstLink();
    }
    //上一页
    function pre() {
        hideTable();
        page--;
        currentRow = pageSize * page;
        maxRow = currentRow - pageSize;
        if (currentRow > numberRowsInTable)
            currentRow = numberRowsInTable;
        for ( var i = maxRow; i < currentRow; i++) {
            theTable.rows[i].style.display = '';
        }
        if (maxRow == 0) {
            preText();
            firstText();
        }
        showPage();
        nextLink();
        lastLink();
    }
    //第一页
    function first() {
        hideTable();
        page = 1;
        for ( var i = 0; i < pageSize; i++) {
            theTable.rows[i].style.display = '';
        }
        showPage();
        preText();
        nextLink();
        lastLink();
    }
    //最后一页
    function last() {
        hideTable();
        page = pageCount();
        currentRow = pageSize * (page - 1);
        for ( var i = currentRow; i < numberRowsInTable; i++) {
            theTable.rows[i].style.display = '';
        }
        showPage();
        preLink();
        nextText();
        firstLink();
    }
    function hideTable() {
        for ( var i = 0; i < numberRowsInTable; i++) {
            theTable.rows[i].style.display = 'none';
        }
    }
    function showPage() {
        pageNum.innerHTML = page;
    }
    //总共页数
    function pageCount() {
        var count = 0;
        if (numberRowsInTable % pageSize != 0)
            count = 1;
        return parseInt(numberRowsInTable / pageSize) + count;
    }

    //显示链接
    function preLink() {
        spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>";
    }
    function preText() {
        spanPre.innerHTML = "上一页";
    }
    function nextLink() {
        spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";
    }
    function nextText() {
        spanNext.innerHTML = "下一页";
    }
    function firstLink() {
        spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>";
    }
    function firstText() {
        spanFirst.innerHTML = "第一页";
    }
    function lastLink() {
        spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>";
    }
    function lastText() {
        spanLast.innerHTML = "最后一页";
    }
    //隐藏表格
    function hide() {
        for ( var i = pageSize; i < numberRowsInTable; i++) {
            theTable.rows[i].style.display = 'none';
        }
        totalPage.innerHTML = pageCount();
        pageNum.innerHTML = '1';
        nextLink();
        lastLink();
    }
    hide();
</script>

</body>
</html>